<script setup>
import { computed, ref } from 'vue'
import { instance } from '@/js/axios_config'
import { Modal } from 'view-ui-plus'
import router from '@/router'

const form = ref()

const validatePassCheck = (rule, value, callback) => {
  if (value !== form.value.formValidate.password) {
    callback(new Error('两次输入的密码不匹配！'))
  } else {
    callback()
  }
}

const passwordRule = ref([
  {
    required: true,
    message: '密码不能为空！',
    trigger: 'change',
  },
  {
    min: 6,
    message: '密码不能少于6位！',
    trigger: 'change',
  },
])

const passwordConfirmRule = ref([
  {
    required: true,
    message: '确认密码不能为空！',
    trigger: 'change',
  },
  { validator: validatePassCheck, trigger: 'change' },
])

const passwordLen = ref(0)

const passwordTip = computed(() => {
  let strong = '强'
  let className = 'strong'
  let percent = passwordLen.value > 10 ? 10 : passwordLen.value
  let color = '#19be6b'

  if (passwordLen.value < 6) {
    strong = '太短'
    className = 'low'
    color = '#ed4014'
  } else if (passwordLen.value < 10) {
    strong = '中'
    className = 'medium'
    color = '#ff9900'
  }

  return {
    strong,
    class:
      'demo-register-tip-' + passwordLen.value < 6
        ? 'low'
        : passwordLen.value < 10
          ? 'medium'
          : 'strong',
    percent: percent * 10,
    color,
  }
})

function handleChangePassword(val) {
  passwordLen.value = val.length
}

function handleSubmit(valid, { phone, password }) {
  if (valid) {
    var jsonValue = JSON.stringify({ phone: phone, password: password })
    instance({
      url: '/user/logup',
      data: jsonValue,
      method: 'POST',
    })
      .then((r) => {
        if (r.statusCode != 0) {
          Modal.warning({
            title: '警告',
            content: r.message,
          })
        } else {
          Modal.success({
            title: '成功',
            content: r.message,
          })

          setTimeout(() => {
            router.push({ path: '/login' })
          }, 3000)
        }
      })
      .catch((e) => {
        Modal.error({
          title: '错误!',
          content: e,
        })
      })
  }
}
</script>

<template>
  <div class="demo-register">
    <Login ref="form" @on-submit="handleSubmit">
      <Mobile name="phone" />
      <Poptip trigger="focus" placement="right" width="240">
        <Password
          name="password"
          :rules="passwordRule"
          placeholder="至少6位密码，区分大小写"
          @on-change="handleChangePassword"
        />
        <template #content>
          <div class="demo-register-tip">
            <div class="demo-register-tip-title" :class="passwordTip.class">
              强度：{{ passwordTip.strong }}
            </div>
            <Progress
              :percent="passwordTip.percent"
              hide-info
              :stroke-width="6"
              :stroke-color="passwordTip.color"
            />
            <div class="demo-register-tip-desc">
              请至少输入 6 个字符。请不要使用容易被猜到的密码。
            </div>
          </div>
        </template>
      </Poptip>
      <Password name="passwordConfirm" :rules="passwordConfirmRule" placeholder="确认密码" />
      <Submit>注册</Submit>
    </Login>
  </div>
</template>

<style scoped>
.demo-register {
  padding-top: 30rem;
  width: 400px;
  margin: 0 auto !important;
}
.demo-register .ivu-poptip,
.demo-register .ivu-poptip-rel {
  display: block;
}
.demo-register-tip {
  text-align: left;
}
.demo-register-tip-low {
  color: #ed4014;
}
.demo-register-tip-medium {
  color: #ff9900;
}
.demo-register-tip-strong {
  color: #19be6b;
}
.demo-register-tip-title {
  font-size: 14px;
}
.demo-register-tip-desc {
  white-space: initial;
  font-size: 14px;
  margin-top: 6px;
}
</style>
